import React, { useState } from 'react';
import ReactDOM from 'react-dom'
const { unstable_batchedUpdates } = ReactDOM

class StateClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num1: 0,
      num2: 0,
      num3: 0,
    }
  }

  handleClick1 = () => {
    this.setState({ num1: this.state.num1 + 1 }, () => { console.log('callback1', this.state.num1) })
    console.log(this.state.num1)
    this.setState({ num1: this.state.num1 + 1 }, () => { console.log('callback2', this.state.num1) })
    console.log(this.state.num1)
    this.setState({ num1: this.state.num1 + 1 }, () => { console.log('callback3', this.state.num1) })
    console.log(this.state.num1)
  }

  handleClick2 = () => {
    setTimeout(() => {
      this.setState({ num2: this.state.num2 + 1 }, () => { console.log('callback1', this.state.num2) })
      console.log(this.state.num2)
      this.setState({ num2: this.state.num2 + 1 }, () => { console.log('callback2', this.state.num2) })
      console.log(this.state.num2)
      this.setState({ num2: this.state.num2 + 1 }, () => { console.log('callback3', this.state.num2) })
      console.log(this.state.num2)
    })
  }

  handleClick3 = () => {
    setTimeout(() => {
      unstable_batchedUpdates(() => {
        this.setState({ num3: this.state.num3 + 1 })
        console.log(this.state.num3)
        this.setState({ num3: this.state.num3 + 1 })
        console.log(this.state.num3)
        this.setState({ num3: this.state.num3 + 1 })
        console.log(this.state.num3)
      })
    })
  }
  render() {
    console.log('render');
    return (<div>
      <h1>类组件</h1>
      <div>
        <div>第一种：批量更新-合并更新</div>
        {this.state.num1}
        <button onClick={() => this.handleClick1()} >num1++</button>
      </div><br />


      <div>
        <div>第二种：setTimeout中异步更新</div>
        {this.state.num2}
        <button onClick={() => this.handleClick2()} >num2++</button>
      </div><br />


      <div>
        <div>第三种：如何在如上异步环境下，继续开启批量更新模式呢？React-Dom 中提供了批量更新方法 unstable_batchedUpdates，可以去手动批量更新</div>
        {this.state.num3}
        <button onClick={() => this.handleClick3()} >num3++</button>
      </div>
    </div>)
  }
}

function StateFunction(props) {
  const [number, setNumber] = React.useState(0)

  React.useEffect(() => {
    console.log('监听number变化，此时的number是:  ' + number)
  }, [number])

  const handerClick = () => {
    /** 高优先级更新 **/
    ReactDOM.flushSync(() => {
      setNumber(2)
    })
    /* 批量更新 */
    setNumber(1)
    /* 滞后更新 ，批量更新规则被打破 */
    setTimeout(() => {
      setNumber(3)
    })
  }
  
  return <div>
    <h1>函数式组件</h1>
    <span> {number}</span>
    <button onClick={handerClick}  >number++</button>
  </div>
}

//setState是否走render
class IsUpdateRender extends React.Component {
  state = {
    num1: 0,
  }

  handleClick1(){
    // 出现了浅比较，不触发render生命周期,视图不会更新
    this.setState((state) => {
      state.num1 = state.num1 + 1
      console.log(state.num1);
    });
  }

  handleClick2(){
    // 先走render,再走回调函数
    this.setState({
      num1: Math.ceil(Math.random() * 10)
    }, () => {
      console.log(this.state.num1)
    });
  }
  render() {
    console.log('render');
    return (<div>
      <h1>试验setState是否更新视图</h1>
      <div>
        {this.state.num1}
        <button onClick={() => this.handleClick1()} >视图不更新</button>
        <button onClick={() => this.handleClick2()} >视图更新</button>
      </div><br />

    </div>)
  }
}
class StateDemo extends React.Component {
  render() {
    return (
      <>
        <StateClass />
        <br />
        <StateFunction />
        <br />
        <IsUpdateRender />
      </>
    )
  }
}
export default StateDemo;